<div class="box box-primary">
    <div class="box-header with-border">
        <h3 class="box-title">用户管理</h3>

        <div class="box-tools pull-right">
            <div class="input-group" style="width: 300px">
                <input type="text" id="serachNameId" class="form-control" placeholder="用户名">
                <span class="input-group-btn">
                 <button class="btn btn-default glyphicon glyphicon-search findUsernameBtn" type="button" style="top: 0px;"></button>
      </span>
                <span class="input-group-btn">
                 <button class="btn btn-default btn-add" type="button" style="top: 0px;">添加</button>
      </span>
                <span class="input-group-btn">
                 <button class="btn btn-default btn-update" type="button" style="top: 0px;">修改</button>
      </span>
            </div>
        </div>
        <!-- /.box-tools -->
    </div>
    <!-- /.box-header -->
    <div class="box-body no-padding">

        <div class="table-responsive mailbox-messages">
            <table class="table table-hover table-striped">
                <thead>
                <th>ID</th>
                <th>用户名</th>
                <th>部门</th>
                <th>邮箱/th>
                <th>手机号</th>
                <th>状态</th>
                <th>修改时间</th>
                <th>操作</th>
                </thead>
                <tbody id="tbodyId">
                <tr>
                    <td colspan="9">数据正在加载中……</td>
                </tr>
                </tbody>
            </table>
            <!-- /.table -->
        </div>
        <!-- /.mail-box-messages -->
    </div>
    <!-- /.box-body -->
    <div class="box-footer no-padding">
        <div class="mailbox-controls">
            <!-- Check all button -->
            <div class="btn-group">
                <button type="button" class="btn btn-default btn-sm deleteBtn"><i class="fa fa-trash-o"></i></button>
            </div>
            <!-- /.btn-group -->
            <button type="button" class="btn btn-default btn-sm refreshBtn"><i class="fa fa-refresh"></i></button>
            <div id="pageID" class="pull-right">
                <!-- 自己写一个分页-->
            </div>
            <!-- /.pull-right -->
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $("#pageID").load("doPageUI", function () {
            doGetObjects();
        });
        $(".refreshBtn").click(function () {doGetObjects()});
        $("#tbodyId").on("click",".btn-valid",doValidById);
        $(".input-group-btn").on("click",".btn-add",doLoadEditUI)
        .on("click",".btn-update",doLoadEditUI);
    })
    function doLoadEditUI() {
        var title;
        if ($(this).hasClass("btn-add")){
            title="添加用户";
        }else if ($(this).hasClass("btn-update")){
            title="修改用户";
            var id=$("tbody input[name='radioId']:checked").val();
            if (!id){
                alert("请先选择");
                return;
            }
            doFindObjectById(id);
        }
        $("#mainID").load("/menu/user_edit",function () {
            $(".box-title").html(title);
        });
    }

    function doFindObjectById(id) {
        var params={id:id};
        var url="/user/doFindObjectById";
        $.getJSON(url,params,function (result) {
            if (result.state==1){
                $("#mainID").data("rowData",result.data);
                console.log($("#mainID").data("rowData"));
            }else {
                alert(result.message);
            }
        })
    }
    function doValidById() {
        var btn=$(this);//获取参数
        var user=btn.parents("tr").data("rowData");
        var id=user.id;
        var valid=user.valid;
        var params={
            id:id,
            valid:valid?0:1
        };
        var url="/user/doValidById"
        $.post(url,params,function (result) {
            if (result.state==1){
                alert("修改成功！");
                doRefreshRow(btn,valid?0:1);
            }else {
                alert(result.message);
            }
        })
    }
    function doRefreshRow(btn,valid) {
        //修改按钮
        btn.html(valid?"禁用":"启用");
        var tr=btn.parents("tr");
        tr.find("td:eq(5)").html(valid?"启用":"禁用");
        //重新绑定数据
        var rowData=tr.data("rowData");
        rowData.valid=valid;
        tr.data("rowData",rowData);
    }

    function doGetObjects() {
        var url="/user/doFindPageObjects";
        var pageCurrent = $("#pageID").data("pageCurrent");
        if(!pageCurrent)pageCurrent=1;
        var params={pageCurrent:pageCurrent};
        $.getJSON(url,params,function (result){
            doHandlerResponseResult(result);
        })
    }

    function doHandlerResponseResult(result) {
        if(result.state==1){
            doSetTableBodyRows(result.data.records);
            doSetPage(result.data);
        }else {
            alert(result.message)
        }
    }

    function doSetTableBodyRows(records) {
        var tbody=$("#tbodyId");
        tbody.empty();
        for(var i in records){
            var tr=$("<tr></tr>");
            var tds=doCreatedIds(records[i]);
            //给当行绑定对应数据
            tr.data("rowData",records[i]);
            tr.append(tds);
            tbody.append(tr);
        }
    }
    function doCreatedIds(row){
        var tds="<td><input type='radio' name='radioId' value='"+row.id+"'></td>"+
            "<td>"+row.username+"</td>"+
            "<td>"+(row.sysDept?row.sysDept.name: '未分配')+"</td>"+
            "<td>"+row.email+"</td>"+
            "<td>"+row.mobile+"</td>"+
            "<td>"+(row.valid?"启用":"禁用")+"</td>"+
            "<td>"+new Date(row.createdTime).toLocaleString()+"</td>"+
            "<td>"+new Date(row.modifiedTime).toLocaleString()+"</td>"+
            "<td><button type='button' class='btn btn-default btn-valid'>"+(row.valid?"禁用":"启用")+"</button></td>";
        return tds;
    }

</script>